<template>
    <div>
        <!-- 搜索导航 -->
        <search></search>
        <!-- 轮播图 -->
        <div class="banner">
            <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
              <van-swipe-item v-for="(item,index) in swiper" :key="index">
                  <img :src="item.image_src" alt="">
              </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 活动栏 -->
        <div class="activities">
            <div class="top">
                <h5>限时快抢</h5>
                <span class="item">00</span>
                <span>:</span>
                <span class="item">00</span>
                <span>:</span>
                <span class="item">00</span>
            </div>
            <div class="bottom">
                <div v-for="(item,index) in goods" :key="index">
                    <img :src="item.goods_big_logo" alt="">
                    <span>{{item.goods_price | price}}</span>
                </div>
            </div>
        </div>
        <div>
            <waterfall></waterfall>
        </div>
    </div>
</template>

<script>
import axios  from "axios";
import waterfall from "../components/comm/goodsShow"
import search from "../components/comm/search"
export default {
    data() {
        return {
            swiper: [], // 轮播图
            goods:[]
        }
    },
    methods:{
        api(){
            return "https://api-hmugo-web.itheima.net/api/public/v1/";
        },
        // 获取轮播图
        getSwiperFun(){
            axios
              .get(this.api()+'home/swiperdata')
              .then(data => {
                  this.swiper = data.data.message
              })
              .catch(function (error) {
                console.log(error);
            });
        },
        getSecKill(){
            axios
              .get(this.api()+'goods/search?query=裙子')
              .then(data => {
                  this.goods = data.data.message.goods.splice(13,4)
              })
              .catch(function (error) {
                console.log(error);
            });
        }
    },
    created(){
        this.getSwiperFun();
        this.getSecKill()
    },
    components:{
        waterfall,
        search
    },
    filters:{
        price:(value)=>{
            return "￥" + value
        }
    },
}
</script>

<style lang="less">
    .activities{
        margin: 20px;
        padding-bottom: 20px;
        background: #fff;
        border-radius: 6px;
        .top{
            // height: 50px;
            // line-height: 50px;
            padding: 10px;
            color: #333;
            h5{
                display: inline;
                margin-right: 10px;
                font-size: 20px;
            }
            span{
                font-size: 14px;
                &.item{
                    background: #FF4466;
                    color: #fff;
                    padding: 4px;
                    margin: 0px 2px;
                    border-radius: 4px;
                    font-weight: 600;
                }
            }
        }
        .bottom{
            display: flex;
            margin-left: 10px;
            div{
                width: 25%;
                height: 100px;
                margin-right: 10px;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                }
                span{
                    font-size: 16px;
                    position: absolute;
                    right: 0px;
                    bottom: 0px;
                    color: #fff;
                    background: #FF4466;
                    border-radius: 4px;
                    padding: 0px 6px;
                }
            }
        }
    }
    // 导航菜单
    .catitems{
        ul{
            width: 100%;
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden;
            display: flex;
            align-items: center;
            padding: 0;
            box-sizing: border-box;
            li{
                float: left;
                width: 20%;
                padding: 20px;
                text-align: center;
                .catitems-img{
                    width:85px;
                    height:85px;
                    margin:auto;
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .catitems-name{
                    font-size: 22px;
                    color: #666;
                }
            }
        }
        ul::-webkit-scrollbar {
          display: none;
        }
    }
    // 轮播图
    .banner{
        .my-swipe .van-swipe-item {
          height: 222px;
          img{
              width: 100%;
              height: 100%;
          }
        }
    }
    body{
        background: #F6F6F6;
    }
</style>